<!--
:mc-config="{'url':'/public/item.json','method':'get','params':[],'fields':[],mcIntervalSeconds:200}"

mcIntervalSeconds:每隔多少秒触发一次刷新数据
-->
<template>
  <el-timeline class="mc-timeline mc-assist-not-drag-pane">
    <span v-if="assist.show"  class="mc-list-assist"  :style="{overflow:overflow,width:'unset'}">
      <el-tag class="mc-list-assist-tag" @click="assistClick(1)">scope.row</el-tag>
      <el-switch  @change="switchViewAllData" v-model="assist.viewAllData" ></el-switch>
    </span>

    <vue-seamless-scroll :data="dataList" :class-option="mcScroll" v-if="mcScroll.open">
      <template v-for="(item,i) in dataList">
        <slot name="row" :row="item" :index="i" :vue="vueIns"></slot>
      </template>
    </vue-seamless-scroll>
    <template v-for="(item,i) in dataList" v-else>
      <slot name="row" :row="item" :index="i" :vue="vueIns"></slot>
    </template>

  </el-timeline>
</template>

<script>
import VueSeamlessScroll from 'vue-seamless-scroll'
import McCommon from "./McCommon";
export default {
  name: 'mc-timeline',
  data () {
    return {
      rendered:false,
      //兼容老数据
      backendList:[],
      dataListCache:[],
      pageCount:this.mcPagerCount,//大于=5小于=21的奇数 多少个分页按钮
      pageSize:this.mcPageSize,//每页多少条
      pageTotal:100,
      currentPage:1,
      assist: {show:window.iframeUi,viewAllData:false},
      apiVisible:false,
      apiInfo:"",
      overflow:this.mcScroll.open?"hidden":"auto",
      vueIns:this
    }
  },
  components:{
    VueSeamlessScroll
  },
  props:{
    //找个莫名其妙的-10000来标记用户是否配置了data.sync属性 兼容老的组件 即使不配置data属性 也能跑起来 也别加类型
    'data':{},
    //静态删除的数组
    'apiDeleteData':{},
    //版本号 v1还不支持data v2开始支持外面传data
    'mcVersion':{type:String,default:"v1"},
    'mcConfig':{type:Object,default:null},
    'mcPagerCount':{type:Number,default:5},
    'mcPageSize':{type:Number,default:10},
     'mcScroll':{type:Object,default: function(){return {open:false}}},
        //参数值 这样可以接受变量 表达式之类的，暂时20个足够使用了
    'mcv1':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv2':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv3':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv4':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv5':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv6':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv7':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv8':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv9':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv10':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv11':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv12':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv13':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv14':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv15':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv16':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv17':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv18':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv19':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv20':{type:[String,Number,Date,Boolean,Array,Object],default:null},
  },
  watch:{
       dataList:{
          handler(newData){
            this.$emit("mc-on-data-change",{data:newData})
          },
          deep:true
        }
  },
  computed:{
    dataList:{
      get(){
        if(this.data||this.mcVersion=='v2'){//新版
          return this.data;
        }
        //兜底最老版本
        return this.backendList;
      },
      set(newData){
        if(this.data || this.mcVersion=='v2'){//新版
          this.$emit("update:data",newData);
          return;
        }
        this.backendList = newData;
      }
    }
  },
  created () {
    //考虑下监听
      var _t = this;
       this.$nextTick(function(){//虚拟dom转化为真实dom后触发
          var pageVue = window.MC ? window.MC['vue'] : window.vueMc;
          if(typeof pageVue !='undefined' && pageVue && this.mcConfig){
            var watch = this.mcConfig.watch;
            if(watch){
                var watchVars = watch.trim().split(",");
                for(var n=0;n<watchVars.length;n++){
                    var varName = watchVars[n];
                    pageVue.$watch(varName,function(n,o){
                        _t.reload();
                    },{deep:true});
                }
            }
        }
      })
      if(!window.iframeUi){//布局器内 接口都缓存了 自动刷新没意义
        var _t = this;
        var intervalTimer = null;
        if(!this.mcConfig){
          return ;
        }
        var mcIntervalSeconds = this.mcConfig.mcIntervalSeconds||0;
        if(mcIntervalSeconds>0){
          intervalTimer = window.setInterval(function (){
            _t.reload();
          }, mcIntervalSeconds*1000);
        }
        //布局器会主动清理此定时任务 避免重复注册
        if(intervalTimer&&window.iframeUi){
          window._mcCacheIntervals.push(intervalTimer)
        }
      }
  },
  mounted() {
      this.reload();
      this.$nextTick(() => {
        //最后一个参数 可以让事件冒泡 也就是所有的组件滚动条都能监听
        window.addEventListener("scroll",this.scrollEvent,true)
      })
  },
  destroyed(){
    window.removeEventListener('scroll',this.scrollEvent,true);
  },
  updated:function(){
    if(window.iframeUi){
      this.$nextTick(function(){//虚拟dom转化为真实dom后触发
        window.iframeUi.magicalApi.addApiTask({methodName:"refreshDragEvent"});
      })
    }
  },
  methods:{
    scrollEvent:function (e){
      if(!this.rendered){
        this.rendered = this.reload();
      }else {
        //这里必须放 不然还取消不了事件呢
        window.removeEventListener('scroll',this.scrollEvent,true)
      }
    },
    reload(){
      this.$nextTick(()=>{
         this.refresh();
      })

    },
    refresh(){
      if(!McCommon.util.isInWindowView(this.$el)){
        return false;
      }
      this.rendered = true;
      //一定要解绑 当组件被渲染过一次时 滚动监听就不再需要了 懒加载过了 还滚动啥
      window.removeEventListener('scroll',this.scrollEvent,true)

      var request = this.$magicaltool.request;
      var _t = this;
      if(this.mcConfig && this.mcConfig.url){
        var url = this.mcConfig.url;
        var method = this.mcConfig.method||'post';
        var limit = this.mcConfig.limit||20;
        var param = {};
        var ncv = request.util.collectMcNameCompareValue(this);
        if(request.util.isMcQueryUrl(url) || request.util.isContentTypeJson(this.mcConfig.contentType)){
          param = request.util.paramsTomMcQuery(ncv || this.mcConfig.params);
          if(this.mcConfig.fields && this.mcConfig.fields.length>0){
            param.fields = this.mcConfig.fields
          }
          url += url.indexOf("?")!=-1 ? "&" : "?";
          url += "limit="+limit;
          param.order = request.util.mcQueryOrder(this.mcConfig.orders);
        }else{
          param = request.util.paramsToJson(ncv || this.mcConfig.params);
          param.limit = limit;//加个关键词入参
        }
        request.axios({contentType:this.mcConfig.contentType,cache:true,$vue:this,url:url,method:method,param:param}).then(function(res){
          _t.dealResult(res);
        })
      }
      return  true;
    },
    dealResult(res){
      McCommon.util.dealResult(this,'dataList','dataListCache',res);
    },
    //预览模式
    showAllDataList(){
      return !window.iframeUi;
    },
    assistClick(type){
      switch(type){
        case  1:
          var obj = {};
            if(this.dataListCache&&this.dataListCache.length>0){
              obj = this.dataListCache[0];
            }
            var jsonHtml = JSON.stringify(obj,null,2);
            McCommon.util.parent.layer({title:"scope.row的数据结构",content:jsonHtml})
          break;
      }
    },
    switchViewAllData(){
      if(this.assist.viewAllData){
        this.dataList = this.dataListCache;
      }else {
        if(this.dataListCache && this.dataListCache.length>0){
          this.dataList = [this.dataListCache[0]];
        }
      }
    },
    addRow:function(entity,idx){
        McCommon.util.addRow(this.dataList,entity,idx)
    },
    deleteRow:function(idx){
        McCommon.util.deleteRow(this.dataList,idx)
    }
  }
}
</script>

<style lang="scss">
.mc-timeline{
  overflow: auto;
}
  .magicalcoder-dragging .mc-timeline{
    min-height: 60px;
  }
</style>
